<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon">
    <style>
        .buy {
            display: flex;
        }

        .phone-img {
            flex: 1;
        }

        .phone-img img {
            width: 560px;
            height: 560px;
        }

        .phone-info {
            flex: 1;
        }

        .title {
            line-height: 1;
            margin: 0;
            padding: 0;
            font-size: 24px;
            font-weight: normal;
            color: #212121;
        }

        .desc {
            color: #b0b0b0;
            margin: 0;
            padding: 0;
            padding-top: 12px;
        }

        .price {
            display: block;
            font-size: 18px;
            line-height: 1;
            color: #ff6700;
            border-bottom: 1px solid #e0e0e0;
            padding: 12px 0 20px;
        }
        .phone-color-group{
            margin-top: 20px;
        }
        .phone-color-group>p {
            color: #333;
            line-height: 1;
            font-size: 18px;
        }
        .color-list{
            height: 100px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            margin-top: 20px;
            
        }
        .color{
            width: 45%;
            height: 40px;
            border: 1px solid #e0e0e0;
            line-height: 40px;
            text-align: center;
        }
        .color.active{
            border-color: #ff6700;
        }
        .buy-now{
            display: flex;
            margin-top: 30px;
            justify-content: space-between;
        }
        
        .btn{
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #b0b0b0;
        }
        .buy-btn{
            width: 60%;
            background-color: #ff6700;
           
        }
        .fav-btn{
            width: 30%;
           
        }
    </style>
</head>

<body>
    <div class="top">
        <header class="container">
            <ul class="top-nav">
                <li>
                    <a href="">小米商城</a>
                </li>
                <li>
                    <a href="">MIUI</a>
                </li>
                <li>
                    <a href="">IoT</a>
                </li>
                <li>
                    <a href="">云服务</a>
                </li>
                <li>
                    <a href="">金融</a>
                </li>
                <li>
                    <a href="">有品</a>
                </li>
                <li>
                    <a href="">小爱开放平台</a>
                </li>
                <li>
                    <a href="">企业团购</a>
                </li>
                <li>
                    <a href="">资质证照</a>
                </li>
                <li>
                    <a href="">协议规则</a>
                </li>
                <li>
                    <a href="">下载app</a>
                </li>
                <li>
                    <a href="">Select Region</a>
                </li>
            </ul>
        </header>
    </div>
    <header class="head-nav container">
        <section class="head-logo">
            <a href="http://mi.com"></a>
        </section>
        <section class="nav">
            <ul class="nav-menu">
                <li>
                    <a href="">小米手机</a>
                </li>
                <li>
                    <a href="">Redmi 红米</a>
                </li>
                <li>
                    <a href="">电视</a>
                </li>
                <li>
                    <a href="">笔记本</a>
                </li>
                <li>
                    <a href="">家电</a>
                </li>
                <li>
                    <a href="">路由器</a>
                </li>
                <li>
                    <a href="">智能硬件</a>
                </li>
                <li>
                    <a href="">服务</a>
                </li>
                <li>
                    <a href="">社区</a>
                </li>
            </ul>
        </section>

        <section class="head-search">
            <form action="" class="search-form">
                <input type="text" class="search-text">
                <input type="submit" class="search-btn iconfont" value="&#xe63c;">
            </form>
            </div>
    </header>
    <main class='page-main'>
        <div class="container">
            <div class="buy">
                <div class="phone-img">
                    <img src="" alt="">
                </div>
                <div class="phone-info">
                    <h2 class="title">小米9</h2>
                    <p class="desc">全曲面轻薄设计，全息幻彩玻璃机身 / 骁龙855旗舰处理器 / 20W无线闪充，标配27W有线快充 / 索尼4800万超广角微距三摄 / 极速屏下指纹解锁 /
                        多功能NFC</p>
                    <p class="price">2699元</p>
                    <div class="phone-color-group">
                        <p>请选择颜色</p>
                        <div class="color-list">
                            <div class="color">白色</div>
                            <div class="color">黑色</div>
                            <div class="color">红色</div>
                            <div class="color">蓝色</div>
                        </div>
                    </div>
                    <div class="buy-now">
                        <div class="buy-btn btn">立即购买</div>
                        <div class="fav-btn btn">立即收藏</div>
                    </div>

                </div>
            </div>
        </div>
    </main>
    <script src="./js/detail.js"></script>

</body>

</html>